<template>
  <div class="uploading-pictures">
    <a-card :bordered="false" class="pictures-card">
      <!-- 顶部搜索和筛选区域 -->
      <div class="search-area">
        <a-space>
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索图片..."
            style="width: 300px"
            @search="handleSearch"
          />
          <a-select v-model:value="statusFilter" style="width: 150px" placeholder="审核状态">
            <a-select-option value="all">全部状态</a-select-option>
            <a-select-option value="pending">等待审核</a-select-option>
            <a-select-option value="reviewing">审核中</a-select-option>
            <a-select-option value="rejected">已驳回</a-select-option>
            <a-select-option value="approved">已通过</a-select-option>
          </a-select>
          <a-button type="primary" @click="handleRefresh">
            <template #icon><SyncOutlined /></template>
            刷新
          </a-button>
        </a-space>
      </div>

      <!-- 图片列表区域 -->
      <div class="pictures-grid">
        <a-row :gutter="[16, 16]">
          <a-col :span="6" v-for="picture in pictures" :key="picture.id">
            <a-card :bordered="false" class="picture-card" hoverable>
              <!-- 图片展示区 -->
              <div class="picture-container">
                <img :src="picture.url" :alt="picture.name" />
                <!-- 状态标签 -->
                <div class="status-badge" :class="[picture.status]">
                  {{ getStatusText(picture.status) }}
                </div>
              </div>

              <!-- 图片信息 -->
              <div class="picture-info">
                <div class="picture-title">{{ picture.name }}</div>
                <div class="picture-meta">
                  <span>上传时间：{{ picture.uploadTime }}</span>
                </div>

                <!-- 进度条（仅在审核中状态显示） -->
                <a-progress
                  v-if="picture.status === 'reviewing'"
                  :percent="picture.progress"
                  size="small"
                />

                <!-- 驳回原因（仅在驳回状态显示） -->
                <div v-if="picture.status === 'rejected'" class="reject-reason">
                  <ExclamationCircleOutlined style="color: #ff4d4f" />
                  <span>{{ picture.rejectReason }}</span>
                </div>

                <!-- 操作按钮 -->
                <div class="picture-actions">
                  <a-space>
                    <a-button type="link" @click="handleView(picture)"> 查看详情 </a-button>
                    <a-button
                      v-if="picture.status === 'rejected'"
                      type="link"
                      @click="handleResubmit(picture)"
                    >
                      重新提交
                    </a-button>
                    <a-button type="link" danger @click="handleDelete(picture)"> 删除 </a-button>
                  </a-space>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 分页器 -->
      <div class="pagination">
        <a-pagination
          v-model:current="current"
          :total="total"
          :pageSize="pageSize"
          show-quick-jumper
          @change="handlePageChange"
        />
      </div>
    </a-card>

    <!-- 图片详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      :title="selectedPicture?.name"
      width="800px"
      @cancel="handleDetailClose"
      :footer="null"
    >
      <div class="picture-detail">
        <div class="detail-image">
          <img :src="selectedPicture?.url" :alt="selectedPicture?.name" />
        </div>
        <div class="detail-info">
          <a-descriptions :column="1">
            <a-descriptions-item label="上传时间">
              {{ selectedPicture?.uploadTime }}
            </a-descriptions-item>
            <a-descriptions-item label="审核状态">
              <a-tag :color="getStatusColor(selectedPicture?.status)">
                {{ getStatusText(selectedPicture?.status) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item v-if="selectedPicture?.status === 'rejected'" label="驳回原因">
              {{ selectedPicture?.rejectReason }}
            </a-descriptions-item>
            <a-descriptions-item label="图片描述">
              {{ selectedPicture?.description || '暂无描述' }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { SyncOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'

  // 状态和变量定义
  const searchText = ref('')
  const statusFilter = ref('all')
  const current = ref(1)
  const pageSize = ref(12)
  const total = ref(100)
  const detailVisible = ref(false)
  const selectedPicture = ref(null)

  // 模拟数据
  const pictures = ref([
    {
      id: 1,
      name: '风景图片1',
      url: 'https://via.placeholder.com/300x200',
      status: 'pending',
      uploadTime: '2024-03-21 10:30:00',
      progress: 0,
      description: '这是一张美丽的风景照片',
    },
    {
      id: 2,
      name: '风景图片2',
      url: 'https://via.placeholder.com/300x200',
      status: 'reviewing',
      uploadTime: '2024-03-21 11:20:00',
      progress: 45,
      description: '这是一张美丽的风景照片',
    },
    {
      id: 3,
      name: '风景图片3',
      url: 'https://via.placeholder.com/300x200',
      status: 'rejected',
      uploadTime: '2024-03-21 09:15:00',
      rejectReason: '图片质量不符合要求，请重新上传',
      description: '这是一张美丽的风景照片',
    },
    {
      id: 4,
      name: '风景图片4',
      url: 'https://via.placeholder.com/300x200',
      status: 'approved',
      uploadTime: '2024-03-21 08:45:00',
      description: '这是一张美丽的风景照片',
    },
  ])

  // 获取状态文本
  const getStatusText = (status: string) => {
    const statusMap = {
      pending: '等待审核',
      reviewing: '审核中',
      rejected: '已驳回',
      approved: '已通过',
    }
    return statusMap[status] || status
  }

  // 获取状态颜色
  const getStatusColor = (status: string) => {
    const colorMap = {
      pending: 'blue',
      reviewing: 'processing',
      rejected: 'error',
      approved: 'success',
    }
    return colorMap[status] || 'default'
  }

  // 处理搜索
  const handleSearch = () => {
    // TODO: 实现搜索逻辑
    message.info('搜索功能待实现')
  }

  // 处理刷新
  const handleRefresh = () => {
    // TODO: 实现刷新逻辑
    message.success('刷新成功')
  }

  // 处理分页
  const handlePageChange = (page: number) => {
    current.value = page
    // TODO: 实现分页逻辑
  }

  // 查看详情
  const handleView = (picture: any) => {
    selectedPicture.value = picture
    detailVisible.value = true
  }

  // 关闭详情
  const handleDetailClose = () => {
    detailVisible.value = false
    selectedPicture.value = null
  }

  // 重新提交
  const handleResubmit = () => {
    // TODO: 实现重新提交逻辑
    message.success('重新提交成功')
  }

  // 删除图片
  const handleDelete = () => {
    // TODO: 实现删除逻辑
    message.success('删除成功')
  }

  onMounted(() => {
    // TODO: 初始化加载数据
  })
</script>

<style scoped>
  .uploading-pictures {
    padding: 24px;
  }

  .pictures-card {
    background: #fff;
  }

  .search-area {
    margin-bottom: 24px;
  }

  .pictures-grid {
    margin-bottom: 24px;
  }

  .picture-card {
    height: 100%;
  }

  .picture-container {
    position: relative;
    padding-top: 75%; /* 4:3 比例 */
    overflow: hidden;
  }

  .picture-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
  }

  .status-badge.pending {
    background-color: #1890ff;
  }

  .status-badge.reviewing {
    background-color: #722ed1;
  }

  .status-badge.rejected {
    background-color: #ff4d4f;
  }

  .status-badge.approved {
    background-color: #52c41a;
  }

  .picture-info {
    padding: 12px;
  }

  .picture-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .picture-meta {
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .reject-reason {
    color: #ff4d4f;
    font-size: 12px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .picture-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }

  .pagination {
    text-align: right;
    margin-top: 16px;
  }

  .picture-detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .detail-image {
    width: 100%;
    text-align: center;
  }

  .detail-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
  }

  .detail-info {
    padding: 0 24px;
  }
</style>
